<template>
  <div class="ui form ei">
    <div class="ui action field ei-input">
      <label>{{field.title}}</label>
      <input type="text" placeholder="输入添加枚举元素" :maxlength="maxlength"  v-model="itemVal" >
      <button type="button" class="ui icon teal button" @click="addItem">
        <i class="plus icon"></i>
      </button>
    </div>
    <div class="ui ei-tags">
      <a class="ui label" v-for="item in val" @click="removeItem(item)">
        {{item}}
        <i class="delete icon"></i>
      </a>
      <!-- <div class="ui radio checkbox" :class="field.name">
        <input type="radio" :value="k" :name="field.name">
        <label for="">{{item}}</label>
      </div> -->
    </div>
  </div>
</template>

<script>
  import tool from 'src/util/tool';
  import util from '_util/index';
  import logic from '_logic';

  export default {
    data() {
      return {
        enum_val: null,
        val: [], //所有值
        itemVal:"", //表单值
      }
    },
    methods: {
      addItem(){
        if(!/^.+$/.test( this.itemVal )){
          util.showMsg(this,'error','请输入有效的枚举元素名称');
          return;
        }
        if(~this.val.indexOf( this.itemVal )){
          util.showMsg(this,'info',this.itemVal+'已存在');
          return;
        }
        this.val.push( this.itemVal );
        this.itemVal = "";
      },
      removeItem(item){
        this.val.splice( this.val.indexOf(item), 1);
      },
      refresh(){
      }
    },
    watch: {
      timestemp:{
        immediate: true,
        handler(val) {
        }
      },
	  itemVal(val,old){
		  if(val.split(" ").length!=1){
			  setTimeout(()=>{
				  this.itemVal = val.replace(/ /g,'_')
			  })
		  }
	  },
      val(val){
        this.$emit('setVo', this.field.name, val)
      }
    },
    computed: {
      placeholder() {
        return `请选择${this.field.title}`
      },
	  maxlength(){
		  return this.field.maxlength || 20
	  }
    },
    props: ['field', 'type', 'param', 'editType', 'timestemp'],
    components: {
    },
    created() {
      this.val = this.field.fval || [];
    },
    mounted() {
      let _that = this

    }
  };
</script>

<style lang="less" scoped>
  .ei {
    &-input{
      input{
        width: auto!important;
        min-width: 300px;
      }
    }
  }
</style>
